<template>
  <div class="page">
    <Snackbar :meunLabel="updateScale.underling ? '管理': null" @onMeunClick="onMeunClick"/>

    <van-cell-group title="收益统计">
      <van-dropdown-menu>
        <van-dropdown-item v-model="optionType1" :options="optionTypes" v-on:change="onChangeSelectType1"/>
        <van-dropdown-item title="筛选" :disabled="optionType1!=3" ref="item1">
          <van-datetime-picker
            v-model="currentDate1"
            type="year-month"
            title="选择年月"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
            v-on:confirm="selectConfirm1"
            v-on:cancel="selectCancel1"
          />
        </van-dropdown-item>
      </van-dropdown-menu>
      <van-cell title="直推收益" :value="updateScale.directScale+'%'"/>
      <van-cell title="间推收益" :value="updateScale.indirectScale+'%'"/>
      <div class="echartsLayout">
        <div id="tview1" class="view"></div>
      </div>
    </van-cell-group>

    <van-cell-group title="注册统计">
      <van-dropdown-menu>
        <van-dropdown-item v-model="optionType2" :options="optionTypes" v-on:change="onChangeSelectType2"/>
        <van-dropdown-item title="筛选" :disabled="optionType2!=3" ref="item2">
          <van-datetime-picker
            v-model="currentDate2"
            type="year-month"
            title="选择年月"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
            v-on:confirm="selectConfirm2"
            v-on:cancel="selectCancel2"
          />
        </van-dropdown-item>
      </van-dropdown-menu>
      <div class="echartsLayout">
        <div id="tview2" class="view"></div>
      </div>
    </van-cell-group>


    <van-action-sheet
      v-model="showManage"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="onManageSelect"
    />


    <van-dialog v-model="showUpdateScale" title="修改收益" show-cancel-button :beforeClose="onUpdateScale">
      <van-cell-group>
        <van-field v-model="fromData.directScale" label="直推收益" type="number" maxlength="5" placeholder="收益百分比"/>
        <van-field v-model="fromData.indirectScale" label="间推收益" type="number" maxlength="5" placeholder="收益百分比"/>
      </van-cell-group>
    </van-dialog>
    <LodingProgress :show="showLoading"></LodingProgress>

  </div>
</template>

<script>
  import Snackbar from '@/components/Snackbar/index'
  import echarts from '@/utils/echarts.min.js'
  import {parseTime} from '@/utils/ruoyi'
  import {userStatistics, incomeStatistics, detailsStatistics, updateIncomeScale} from "@/api/user";
  import {Notify} from 'vant';

  export default {
    name: "userReg",
    components: {Snackbar},
    data() {
      return {
        showLoading: false,
        showManage: false,
        showUpdateScale: false,
        updateScale: {
          underling: false,
          directScale: 0,
          indirectScale: 0
        },
        fromData: {
          agentId:null,
          directScale: 0,
          indirectScale: 0
        },
        actions: [
          {id: 1, name: "修改收益"}
        ],
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        currentDate1: new Date(),
        optionType1: 1,
        optionType2: 1,
        currentDate2: new Date(),
        optionTypes: [
          {text: '今日', value: 1},
          {text: '本月', value: 2},
          {text: '筛选年月', value: 3},
        ]
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        let _this = this;
        this.showLoading = true;
        let agentId = this.$route.params && this.$route.params.agentId;
        let myChart1 = echarts.init(document.getElementById('tview1'));
        let myChart2 = echarts.init(document.getElementById('tview2'));
        detailsStatistics({
          agentId: agentId,
          type: this.optionType1,
          quertDate: parseTime(this.currentDate)
        }).then(response => {
          _this.updateScale = {
            underling: response.data.underling == 0,
            directScale: response.data.directScale,
            indirectScale: response.data.indirectScale
          }
          _this.fromData = {
            agentId : agentId,
            directScale: response.data.directScale,
            indirectScale: response.data.indirectScale
          }
          myChart1.setOption(response.data.income);
          myChart2.setOption(response.data.regUser);
          _this.showLoading = false;
        }, error => {
          _this.showLoading = false
        })
      },
      http1() {
        let myChart = echarts.init(document.getElementById('tview1'));
        let _this = this;
        this.showLoading = true;
        incomeStatistics({
          type: this.optionType2,
          quertDate: parseTime(this.currentDate2)
        }).then(response => {
          myChart.setOption(response.data);
          _this.showLoading = false;
        }, error => {
          _this.showLoading = false
        })
      },
      http2() {
        let myChart = echarts.init(document.getElementById('tview2'));
        let _this = this;
        this.showLoading = true;
        userStatistics({
          type: this.optionType2,
          quertDate: parseTime(this.currentDate2)
        }).then(response => {
          myChart.setOption(response.data);
          _this.showLoading = false;
        }, error => {
          _this.showLoading = false
        })
      },
      onUpdateScale(action, done) {
        if (action === 'confirm') {
          let _this = this;
          updateIncomeScale(this.fromData).then(response => {
            _this.updateScale.directScale = _this.fromData.directScale;
            _this.updateScale.indirectScale = _this.fromData.indirectScale;
            Notify({type: 'success', message: "修改成功"});
            done();
          }, error => {
            done(false);
          })
        } else {
          done();
        }
        return false;
      },
      onMeunClick() {
        if (this.updateScale.underling) {
          this.showManage = true;
        }
      },
      onManageSelect(item) {
        if (item.id == 1) {
          this.showUpdateScale = true;
        }
      },
      formatter(type, val) {
        if (type === 'year') {
          return `${val}年`;
        } else if (type === 'month') {
          return `${val}月`;
        }
        return val;
      },
      onChangeSelectType1(value) {
        this.http1();
      },
      selectConfirm1(date) {
        this.$refs.item1.toggle();
        this.http1();
      },
      selectCancel1() {
        this.$refs.item1.toggle();
      },
      onChangeSelectType2(value) {
        this.http2();
      },
      selectConfirm2(date) {
        this.$refs.item2.toggle();
        this.http2();
      },
      selectCancel2() {
        this.$refs.item2.toggle();
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import './index.scss';
</style>
